import React, { useEffect, useState } from 'react';
import { $fetch } from '@block/utils';
import { ApprovalHeader, OperationButton, Container, Loading, Form, ApprovalFlow, Tag } from '@block/plug';
import { message } from '@ss/mtd-react';
import approvalData from './data';
import URL from './url';
import './index.scss';

const ACTIONTYPE = {
  START: '已提交',
  RESTART: '重新提交',
  REJECTED: '已驳回',
  REFUSED: '已拒绝',
  KILLED: '强制结束',
  HANDLED: '已通过',
  WITHDRAW: '已撤回',
  DELEGATED: '',
  AUTO_HANDLED: '自动通过',
  DELEGATED_WITHDRAW: '加签中被撤回',
  // AUTO_HANDLED: '自动通过',
  CANCELED: '',
  PENDING: '审批中',
  UNKNOWN: '',

  finish: '已通过',
  error: '拒绝',
  process: '审批中',
  wait: '',
};

const { Aside, Main } = Container;

const PersonListManageApprove = () => {
  // const [approvalDetail, setApprovalDetail] = useState({});
  const [basicInfo, setBasicInfo] = useState([]);
  // const [detailData, setDetailData] = useState();

  const getDetailData = async () => {
    const res = await $fetch(URL.viewApprovalDetail, {});
    console.log(res);
    const basicInfoData = [
      {
        label: '单据号',
        value: 'PR202106020018',
        isCopy: true,
      },
      {
        label: '申请人',
        value: (
          <>
            <img
              className="avatar"
              src="https://msstest-img.sankuai.com/v1/mss_37ed3a16b0594c9fb747ff29d3d087e8/profile0/92d891a4-851e-4438-bb25-1c7b4fc425a5"
              alt="头像图片"
            />
            樊红香
          </>
        ),
        userCardMis: 'fanhongxiang01',
      },
      {
        label: '申请部门',
        value: '公司事务平台/…/流程系统规划组',
      },
      {
        label: '申请时间',
        value: '2021-06-30',
      },
    ];
    setBasicInfo(basicInfoData);
  };

  useEffect(() => {
    getDetailData();
  }, []);

  const getUserInfo = async () => {
    const { data } = await $fetch('/internal/audit/oper/api/emp/r/getuserinfo', {}, { method: 'GET' });
    const {
      avatarUrl:
        avatar = 'https://msstest-img.sankuai.com/v1/mss_37ed3a16b0594c9fb747ff29d3d087e8/profile0/92d891a4-851e-4438-bb25-1c7b4fc425a5',
      misNo: mis,
      name,
      orgNamePath = '',
      employeeId: uid,
    } = data;
    return { avatar, mis, name, orgNamePath, uid };
  };

  // 节点状态映射
  const handleNodeStatus = (nodeStatus) => {
    let approvalNodeStatus = 'finish';
    switch (nodeStatus) {
      case null:
        approvalNodeStatus = 'wait';
        break;
      case 'PENDING':
        approvalNodeStatus = 'process';
        break;
      case 'REJECTED':
        approvalNodeStatus = 'error';
        break;
      case 'WITHDRAW':
        approvalNodeStatus = 'error';
        break;
      default:
        approvalNodeStatus = 'finish';
    }
    approvalNodeStatus = nodeStatus;
    return approvalNodeStatus;
  };

  return (
    <div className="person-list-manage-approval">
      <div className="person-list-manage-approval-header">
        <div className="approval-header-left">
          <ApprovalHeader
            title="敏感岗位审批"
            // key={Math.random()}
            avatar="https://msstest-img.sankuai.com/v1/mss_37ed3a16b0594c9fb747ff29d3d087e8/profile0/92d891a4-851e-4438-bb25-1c7b4fc425a5"
            mis="yintengfei"
            status="in-approval"
            data={basicInfo}
            // showOnlyInAll={['申请部门', '关联BR单']}
            showBack={false}
            getUserInfo={getUserInfo}
          />
        </div>
        <div className="approval-header-right">
          <OperationButton
            authButtonList={['addApprover', 'group', 'withdraw', 'reject', 'approve']}
            // @ts-expect-error
            onSubmit={(data, key) => {
              switch (key) {
                case 'addApprover':
                  message.success({ message: '加签成功!' });
                  break;
                case 'withdraw':
                  message.success({ message: '撤回成功!' });
                  break;
                case 'approve':
                  message.success({ message: '通过成功!' });
                  break;
                case 'reject':
                  message.success({ message: '驳回成功!' });
                  break;
                case 'transfer':
                  message.success({ message: '转交成功!' });
                  break;
                case 'Button':
                  message.success({ message: '操作成功!' });
                  break;
                default:
                  message.success({ message: '其他操作成功!' });
                  break;
              }
            }}
            modalOptions={{
              addApprover: {
                getContainer: () => document.querySelector('.person-list-manage-approval-content'),
                onFetchUserList: async (filter) => {
                  console.log(filter);
                  // return data.filter((v) => !filter || v.mis.includes(filter));
                },
              },
            }}
          />
        </div>
      </div>
      <div className="person-list-manage-approval-content">
        <Container className="approve-container">
          <Main className="node-content" style={{ padding: '0px' }}>
            <Loading loading={false}>
              <Form labelWidth="8em" mode="view">
                <Form.Title>申请信息</Form.Title>
                <Form.Item formItemKey="phone" label="流程名称：">
                  <span toFormItem />
                </Form.Item>
                <Form.Item formItemKey="email" label="流程编号：">
                  <span toFormItem />
                </Form.Item>
                <Form.Item formItemKey="lastDay" label="关联授权事项：">
                  <span toFormItem />
                </Form.Item>
                <Form.Item formItemKey="reasonName" label="流程设计链接：">
                  <span toFormItem />
                </Form.Item>
                <Form.Item formItemKey="otherReason" label="关联授权规则：">
                  <span toFormItem />
                </Form.Item>
              </Form>
            </Loading>
          </Main>
          <Aside className="approve-container-approval" width="368px" style={{}}>
            <div className="approval-container-title">审批流程</div>
            <ApprovalFlow className="approval-flow">
              {approvalData.map((item) => {
                const { nodeStatus, actionList } = item;
                const { taskName, actTime, actorDTOList, comment } = actionList[0];
                const { name, misNum, avatarUrl } = actorDTOList[0];
                return (
                  <ApprovalFlow.Item
                    key={item.mis}
                    status={handleNodeStatus(nodeStatus)}
                    title={
                      <div>
                        <span className="mtd-plug-approval-title">{taskName}</span>
                        {nodeStatus !== 'wait' && (
                          <Tag className="mtd-plug-approval-tag" theme="gray" type="pure">
                            {ACTIONTYPE[nodeStatus]}
                          </Tag>
                        )}
                        <span className="mtd-plug-approval-time">{actTime}</span>
                      </div>
                    }
                    description={
                      <>
                        <div>
                          <img className="mtd-plug-approval-logo" alt="头像" src={avatarUrl} />
                          <span className="mtd-plug-approval-user">{`${name}/${misNum}`}</span>
                        </div>
                        {comment}
                      </>
                    }
                  />
                );
              })}
              <ApprovalFlow.Item
                key="last"
                status="finish"
                title={<span className="mtd-plug-approval-title">完成</span>}
              />
            </ApprovalFlow>
          </Aside>
        </Container>
      </div>
    </div>
  );
};

export default PersonListManageApprove;
